<template>
<div class="word-list-container">
  <var-app-bar title="单词列表">
    <template #left>
      <var-button
          round
          text
          color="transparent"
          text-color="#fff"
          @click="goBack"
      >
        <var-icon name="chevron-left" :size="24" />
      </var-button>
    </template>
    <template #right>
      <input placeholder="请输入单词"
             class="input_search"
             v-model="inputValue"
        :style="isSearch ? 'width:150px;' : 'display:none'"
      />
      <var-button
          round
          text
          color="transparent"
          text-color="#ffffff"
          @click="searchData"
      >
        <var-icon name="magnify" :size="24" />
      </var-button>
    </template>
  </var-app-bar>

  <var-collapse v-model="value" :offset="false">
    <var-list
        :finished="finished"
        v-model:loading="loading"
        @load="load"
    >
      <var-cell :key="item" v-for="item in list">
        <var-collapse-item :title="item.word" :name="item.id">{{item.translate}}</var-collapse-item>
      </var-cell>
    </var-list>
  </var-collapse>



  <var-back-top :duration="200" bottom="90"/>
</div>
</template>

<script lang="ts" setup>
import router from "@/router";
import {getPage} from '@/api/wordAPI';
import {onMounted, ref} from "vue";
import {WordModel} from "@/model/wordModel";

const inputValue = ref('');
const loading = ref(false)
const finished = ref(false)
const list = ref<WordModel[]>([])
const limit = ref(13)
const pages = ref(0);
const current = ref(1);
const value = ref(['0'])

const load = () => {
  setTimeout(() => {
    current.value++;
    loading.value = true;
    getPage(current.value, limit.value)
        .then((res) => {
          for (let i = 0 ; i < res.data.records.length ; i++) {
            list.value.push(res.data.records[i]);
          }
          loading.value = false;
        })
        .finally(() => {
          if (current.value >= pages.value) {
            finished.value = true;
          }
          loading.value = false;
          console.log(`len:${list.value.length}`)
        })
  } , 1000)

}
const goBack = () => {
  router.back();
}
const searchData = () => {
  isSearch.value = true;
}
const isSearch = ref(false);

onMounted(() => {
  getPage(current.value , limit.value)
      .then((res) => {
        console.log(res)
        pages.value = res.data.pages;
        list.value = res.data.records;
        console.log(`len:${list.value.length}`)
      })

})
</script>

<style scoped>
.word-list-container{
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.input_search{
  transition: 0.5s;
  height: 30px;
}
</style>